@import "@/styles/fonts";
@import "@/styles/variables.scss";
@import "@/styles/backgrounds.scss";
@import "@/styles/border.scss";
@import "@/styles/interactive.scss";
.button-primary {
  @extend .content-bold;
  @extend .no-radius;
  @extend .color-white;
  padding: 8px 12px !important;
  @extend .active-bg;
  @extend .primary-bg-light-hover;
  @extend .pointer;
  @extend .no-select;

  border-color: $--color-primary !important;
}
.button-cancel {
  @extend .button-primary;
  @extend .primary-bg-dark;
}
.widget-dialog {
  .button-cancel {
    @extend .button-primary;
    @extend .primary-bg-dark;
  }
}
.button-warning {
  @extend .button-primary;
  @extend .danger-bg;
}

.button-panel-normal {
  @extend .content-bold;
  @extend .pointer;
  @extend .no-select;
  padding: 8px 12px !important;
  position: relative;
  &:hover,
  &.active {
    color: white;
  }
  color: rgba(#fff, 0.3);
}

.button-panel {
  @extend .button-panel-normal;
  &::after {
    position: absolute;
    content: " ";
    right: 0px;
    top: 0px;
    width: 28px;
    border-top: 2px solid $--color-primary-light-3;
  }
}

.button-ui {
  @extend .no-radius;
  @extend .pointer;
  @extend .no-border;
  background: url("~@/assets/images/bg_active.png") 100% 100% no-repeat;
  &:hover,
  &.active {
    color: white;
  }
}

.right-screen {
  right: 36px;
  top: 14px;
  position: absolute !important;
  cursor: pointer;
}
.column-group {
  .el-button {
    margin-bottom: 8px;
  }
}

.animationDot {
  width: 14px;
  height: 14px;
  right: 4px;
  top: 4px;
  background-color: $--color-danger;
  border-radius: 50%;
  border: 1px solid goldenrod;
}

.animationDot {
  animation: blink 1.5s linear infinite;
}
